<template>
    <div style="width: 100%;height: 100%;" id="playWnd"></div>
  </template>
  
  <script setup>
import {
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  onBeforeUnmount,
} from "vue";
import clickLogin from "../../../utils/monitor";
import monitorOne from "../../../utils/monitorOne";
import { defineProps } from "vue";
const props = defineProps({
  data: Object
});
  onMounted(async() => {
    // await clickLogin.init("192.168.2.64", "divPlugin");
    // await clickLogin.clickLogin("192.168.2.64", "80", "admin", "hik123456");
    // await clickLogin.clickStartRealPlay();
    // // await clickLogin.changeWndNum('2')
    // setTimeout(()=>clickLogin.changeWndNum('2'), 3000)
    // monitorOne.initPlugin()
  })

  watch(() => props.data, (newData) => {
      if (newData) {
        // monitorOne.init(newData)
      }
    });

  onBeforeUnmount(async () => {
    monitorOne.undataHtml()
  // clickLogin.clickLogout("192.168.2.64");
  // clickLogins.clickLogout("192.168.2.64");

});
  </script>
  
  <style lang="scss" scoped>
  .rank-item {
    padding: 0px 0px;
    font-size: 16px;
    color: #ffffff;
    display: flex;
  
    .num-box {
      width: 36px;
      height: 36px;
      margin-right: 10px;
      position: relative;
  
      img {
        width: 100%;
        height: 100%;
      }
  
      div {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 36px;
      }
    }
  
    .rank-item1 {
      flex: 1;
  
      &__top {
        display: flex;
        align-items: center;
  
        .dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: rgba(54, 113, 232, 1);
        }
  
        .rank {
          margin-left: 8px;
        }
  
        .name {
          flex: 1;
          width: 0px;
          margin: 0px 16px;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
        }
  
        .value {
          // width: 150px;
          text-align: right;
        }
      }
  
      &__bottom {
        margin-top: 8px;
        position: relative;
        background-color: rgba(92, 110, 130, 0.35);
        height: 8px;
  
        .progress {
          position: absolute;
          height: 100%;
          left: 0px;
          top: 0px;
        }
      }
    }
  
  }
  
  // .rank-item {
  //   margin-bottom: 16px;
  // }
  </style>
  